<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="__TPLPATH__/Public/beg/plugins/layui/css/layui.css"  media="all">
  <script type="text/javascript" src="__TPLPATH__/Public/beg/plugins/layui/layui.js"></script>
</head>
<body>
              
<blockquote class="layui-elem-quote">
  <a>微信公众号菜单</a>
</blockquote>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>微信公众号菜单</legend>
</fieldset>
 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>动态操作Tab</legend>
</fieldset>
 
<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容1</div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
</div>
<div class="site-demo-button">
  <button class="layui-btn site-demo-active" data-type="tabAdd">新增一个Tab项</button>
  <button class="layui-btn site-demo-active" data-type="tabDelete">删除第三个Tab项</button>
  <button class="layui-btn site-demo-active" data-type="tabChange">切换到第二个Tab项</button>
</div>





<ul class="layui-nav layui-nav-tree" lay-filter="menu_wx">
  <foreach name="menu['button']" item="v">

  <li class="layui-nav-item layui-nav-itemed">

    <a href="javascript:;" button_type="{$v['type']}" button_url="{$v['url']}" button_name="{$v['name']}" lay-filter="menu_wx_main">{$v['name']}</a>
    <empty name="v['sub_button']">
      
      <else />
    <dl class="layui-nav-child">
      <foreach name="v['sub_button']" item="b">
        <dd><a href="javascript:;" button_type="{$b['type']}" button_url="{$b['url']}" button_name="{$b['name']}" lay-filter="menu_wx_sub">{$b['name']}</a></dd>
        </foreach>
    </dl>
  
  
  </li>
  </empty>
  </foreach>

</ul>
 <div style="display: inline-block; width: 180px; height: 210px; padding: 10px; border: 1px solid #ddd; overflow: auto;">
  <ul id="menu_tree"></ul>
</div>
<form class="layui-form layui-form-pane" action=""> 
    <foreach name="menu['button']" item="v">
  <blockquote class="layui-elem-quote">
  <a>
    <div class="layui-form-item">
    
    <label class="layui-form-label" button_type="{$v['type']}" button_url="{$v['url']}" button_name="{$v['name']}" lay-filter="menu_wx_xx" >{$v['name']}</label>
    <div class="layui-input-inline">
      <button class="layui-btn layui-btn-normal">百搭按钮</button>
      <select name="quiz1" id="select_menu" lay-filter="menusss" >
        <empty name="v['sub_button']">
        <option value="" disabled="" selected="">没有子菜单</option>
      <else />
      <button class="layui-btn layui-btn-normal">百搭按钮</button>
        <option value="" disabled="" selected="">请选择子菜单</option>
        <foreach name="v['sub_button']" item="b">
          <button class="layui-btn layui-btn-normal">百搭按钮</button>
        <option value="浙江" button_type="{$b['type']}" button_url="{$b['url']}" button_name="{$b['name']}" >{$b['name']}</option>
        </foreach>
        </empty>
  
      </select>
    </div>
  </div>
  </a>
</blockquote>
  </foreach>
  
</form>

<div class="site-mobile-shade"></div>

<script type="text/javascript" src="__TPLPATH__/Public/beg/plugins/layui/layui.js"></script>
<script>

layui.use(['element','layer','form'], function(){
  var element = layui.element(); //导航的hover效果、二级菜单等功能，需要依赖element模块
var layer = layui.layer;
var $ = layui.jquery; 
//wxmenu.creat();
  $('.layui-form-item ').on('click', 'label', function () {
        console.log($(this).attr('button_name'));
        //layer.msg($(this).attr('button_name'));
          layer.prompt({title: '输入任何口令，并确认', formType: 0}, function(pass, index){
          layer.close();
          console.log(pass);
        })
        }).on('click', 'dd8', function () {
        console.log($(this).attr('button_name'));
        //layer.msg($(this).attr('button_name'));
          layer.prompt({title: '输入任何口令，并确认', formType: 0}, function(pass, index){
          layer.close();
          console.log(pass);
        })
        });
   $('ul.layui-tab-title li').on('click', 'layui-tab-close', function () {
            $(this).children("i").on('click', 'li', function () {
              alert(1);
            });
        console.log($(this).attr('button_name'));
        //layer.msg($(this).attr('button_name'));
          layer.prompt({title: '输入任何口令，并确认', formType: 0}, function(pass, index){
          layer.close();
          console.log(pass);
        })
        });
        // $("#select_menu").change(function() { alert($("select_menu").val()) }); 
        // })

  //监听导航点击
  // element.on('nav(menu_wx)', function(elem){
  //   console.log(elem);
  //   layer.msg(elem.text());
  // });
  element.on('form(menusss)', function(elem){
    console.log(elem);
    layer.msg(elem.html());
  });

});



layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element(); //Tab的切换功能，切换事件监听等，需要依赖element模块
  
  //触发事件
  var active = {
    tabAdd: function(){
      //新增一个Tab项
      element.tabAdd('demo', {
        title: '新选项'+ (Math.random()*1000|0) //用于演示
        ,content: '内容'+ (Math.random()*1000|0)
      })
    }
    ,tabDelete: function(){
      //删除指定Tab项
      element.tabDelete('demo', 2); //删除第3项（注意序号是从0开始计算）
    }
    ,tabChange: function(){
      //切换到指定Tab项
      element.tabChange('demo', 1); //切换到第2项（注意序号是从0开始计算）
    }
  };
  
  $('.site-demo-active').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
});

</script>

</body>
</html>